<template>
	<view>
		<view class="big">
			<view class="left">
				<scroll-view scroll-y="true" class="list_fl">
					<view v-for="item,index in list" :key="item.id" @click="dj(index)" :class="{'son_list':true, active:idx==index}">{{item.name}}</view>
				</scroll-view>
			</view>
			
			<view class="right">
				<view class="rig" v-for="item,index in list_children" :key="item.id">
					{{item.name}}
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { ref } from "vue"
import {getFllist} from '../../unti/api.js'
	
	export default {
		setup(props, context) {
			
		let idx=ref()
		let list=ref([])
		let list_children=ref([])
		getFllist().then((res)=>{
			console.log(res);
			list.value=res.data.data	
			list_children.value=list.value[0].labelList
		})
		const dj=(index)=>{
			console.log(index);
			idx.value=index
			// console.log(list.value[index])
				list_children.value=list.value[index].labelList
			// console.log(list_children);
		}
		return{
			list,
			dj,
			idx,
			list_children
		}
		}
	}
</script>

<style>
	.right{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		float: right;
		height: 50px;
		margin: 20px 0;
	}
	.rig{
		border: 1px solid black;
		font-size: 15px;
		border-radius: 20px;
		/* padding: 4px 7px; */
		text-align: center;
		line-height: 30px;
		width: 80px;
		height: 30px;
		margin: 10px 0;
	}
	.big{
		display: flex;
	}
.list_fl{
	width: 200rpx;
 height: 1400rpx; 
	background-color: rgb(252, 252, 252);
}
.son_list{
	padding: rpx 10rpx;
	margin: 100rpx 20rpx;
		font-size: 35rpx;
		color: #ccc;
		text-align: center;
		align-items: center;
		position: relative;
	}
	.active {
	    color: #345DC2;
	   }
	  .active::after {
	    content: " ";
	    width: 2px;
	    height: 15px;
	    background: #345DC2;
	    position: absolute;
	    top: 7px;
	    left: 0px;
	  }
		.left{
			float: left;
		}
		
</style>
